<template>
  <h2>toRefs的使用 </h2>
  <!-- return state -->
  <!-- <h3>name:{{state.name}}</h3>
  <h3>age:{{state.age}}</h3> -->
  <hr>
  <!-- return ...state 和 return ...state2 -->
  <h3>name:{{name}}</h3>
  <h3>age:{{age}}</h3>

  <!-- useFeatureX -->
  <h3>name2:{{name2}}</h3>
  <h3>age2:{{age2}}</h3>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs } from "vue";

function useFeatureX() {
  const state = reactive({
    name2:'自来也',
    age2:12
  })
  setInterval(() => {
    state.name2 += '++'
  }, 2000);
  return {
    ...toRefs(state)
  }
}

export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      name:'兹拉有',
      age:18
    })
    //toRefs可以把reactive包裹的数据变成普通的对象的包裹的ref对象
    //const state2 = toRefs(state);
    const {name,age} = toRefs(state);
    //定时器，更新数据（如果数据变化了，界面也随之变化，响应式数据）
    setInterval(() => {
      //state.name += '==';
      //state2.name.value += '--';
      name.value += '-'
      console.log("=====");
    },2000);

    const {name2,age2} = useFeatureX();
    return {
      //state,
      //...state,//不是响应式数据(这种方法数据变化不会重新渲染)
      //...state2,//toRefs返回的对象
      name,
      age,
      name2,
      age2,
    };
  },
});
</script>
